<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <el-card>
    <el-table :data="rightsList" stripe style="width: 100%" border>
      <el-table-column label="#" type="index" width="120"/>
      <el-table-column prop="authName" label="名称" />
      <el-table-column prop="path" label="路径" />
      <el-table-column prop="level" label="权限等级" >
        <template v-slot:default="scope">
          <el-tag v-if="scope.row.level === '0' ">一级权限</el-tag>
          <el-tag v-if="scope.row.level === '1' " type="success">二级权限</el-tag>
          <el-tag v-if="scope.row.level === '2' " type="warning">三级权限</el-tag>
        </template>
      </el-table-column>

    </el-table>
  </el-card>

</template>

<script>
export default {
  name: "Rights",
  data(){
    return {
      rightsList: [],
    }
  },
  created() {
    this.getRightsList()
  },
  methods:{
    async getRightsList() {
      const {data: res} = await this.$http.get('rights/list');

      if(res.meta.status !== 200){
        return this.$message.error(res.meta.msg);
      }

      this.rightsList = res.data

      console.log(res.data)

    },

  }


}
</script>

<style scoped>

</style>